<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <!-- <p id="num">0</p> -->
      <input type="text" v-model="newdata" />
      <input type="button" value="添加数据" @click="add" />
      <ul>
        <li v-for="(item, index) in arr" :key="item.id">
          <input type="checkbox" /> {{ index }} - {{ item.name }}
        </li>
      </ul>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    //dom操纵次数从3万次变成3次；时间从2000ms-3ms:虚拟DOM的diff算法，就是帮你减少DOM操作，大大提高页面的渲染速度。

    // console.time("start");
    // let num = document.getElementById("num"); //一次DOM操作
    // let count = num.innerText; //一次DOM操作
    // for (let i = 0; i < 30000; i++) {
    //   count++;
    // }
    // num.innerText = count; //一次DOM操作
    // console.timeEnd("start");

    new Vue({
      el: "#app",

      data: {
        newdata: "",
        arr: [
          {
            id: 1,
            name: "濑尿虾",
          },
          {
            id: 2,
            name: "大闸蟹",
          },
        ],
      },

      methods: {
        add() {
          let time = new Date();
          let id = time.getTime(); //获取毫秒数
          console.log(id);
          this.arr.unshift({
            id,
            name: this.newdata,
          });
        },
      },
    });

    /*
        虚拟DOM  diff算法:判断dom是否需要重新构建，如果不需要，diff只会帮你修改部分数据，节点仍然是那个节点。时间复杂度,diff算法规定，如果节点都不同，就没必要匹配下面的子节点，砍掉原节点，创建新节点再插入到DOM树中。key 绑定在节点上，用于dom算法做匹配，速度会更快，因为key是唯一的，相当于给节点绑定id。(key必须是唯一且稳定的值)

        1.准备文档树 DOM树
        {
            ele : 'h1,
            key : 1,
            attr : {title:'标题',alt:'标题2'},
            child : {
                ele : 'span',
                key : 2,
                attr : {},
                child : '哈哈'
            }
        }

         {
            ele : 'h1,
            key : 1,
            attr : {title:'标题666',alt:'标题2'},
            child : {
               ele:'i',
               key : 2,
               attr :{},
               child : '哈哈'
            }
        }

        document.body.appendChild(h1)

    */

    function create(obj) {
      let h1 = document.createElement("h1");
      h1.setAttribute("title", "标题");
      // h1.innerText = "虚拟DOM";
      if (child instanceof Object) {
        //继续遍历
        create(child);
      } else {
        h1.innerText = "虚拟DOM";
      }
    }
  </script>
</html>
